在面試時，許多面試官提出了關於作品的問題，發現一個共通點：作品中幾乎沒有用到JavaScript。大多數公司更注重JS的能力，而純切版的職缺需求較少。那時候JS基礎幾乎為零，於是乎下定決心提升自己的JS技能，同時也把之前還沒做的功能做完。
使用 Firebase 的 Authentication 完成會員登入、註冊、登出功能。
透過 Firebase Firestore 資料庫完成文章的增刪功能，並透過無限滾動（Infinite Scroll）提升使用體驗。
參考了許多 Image Slider 教學，最終選擇自行實作輪播功能，避免只依賴套件，提升 JS 能力。
使用 Framer Motion 為頁面轉場增添了動畫效果，並在瀏覽過程中加上進度條，提升互動性。
基於 Image Gallery 的教學，加入了搜尋功能。學會如何串接 API，也初步接觸了 Tailwind CSS。
選用 Firebase 是因為當時在島島阿學的專案中使用到了 Firebase 為BAAS（Backend As A Service）的方式提供後端服務，於是便將這次的改版作品用作練習。同時依靠許多網路上的教學來逐步完成功能：
文章無限滾動與新增功能：參考自前端工程師也能開發全端網頁：挑戰 30 天用 React 加上 Firebase 打造社群網站｜Firebase 教學
作品的文章頁面無限滾動跟新增文章就是來自這個教學的功能，做完之後就魔改過去作品，成為我的一部分。
感恩鐵人賽讚嘆鐵人賽，但這邊要小小提醒一下，因為有版本升級的問題，要特別注意，有些React或是套件的用法改了。
會員管理功能：參考自 React Firebase v9 project images gallery with uploading multiple images and progress percentage bar
作品有用到這個教學的會員管理（登入、登出）的功能。另外也因為這個教學是的狀態管理是用useContext，也讓我可以感受一下使用Redux和useContext的差異跟情境。
頁面轉場特效&瀏覽頁面進度條：參考自React教學 - 使用 Framer-Motion 製作頁面轉場特效 (Page Transitions)
搜尋功能：參考自React & Tailwind CSS Image Gallery
Image Search App using React and Unsplash API
這個功能是我後來誤大誤撞加進來的，因為看到上面的Image gallery教學完成後，對Image gallery很有興趣，便搜尋了很多相關教學來摸索看看，剛好都有search bar，我就想到設計稿上也需要有搜尋功能，就外帶過去囉
上面兩個還可以練習串接API，跟UI Library Tailwind CSS，蠻推薦的！！
Building the Pinterest UI Clone ReactJS | For Beginners
這個是後來一直很想做的Pinterest Clone，不過時間不夠沒做，希望之後有機會來玩玩看，很想做個可以當影像作品集的完整web作品。
文章頁面圖片輪播：參考自Build React Image Slider From Scratch Tutorial
其實圖片輪播Image Slider是有套件就能完成的功能，但想起Alex大大講過如果只會用用套件，不知道套件是怎麼寫的，那你的能力就只會停在會使用套件，但我想提升我的JS能力！！！
因此！就想說可以的話還是練習一下，不過我還是有找到套件的教學，你一定會想說那上面的轉場特效跟進度條為何沒有用原生的寫法？因為我......還是個凡人，還是想偷懶
React教學 - 使用 React Slick 套件製作輪播效果 (Carousel)
也有找github別人使用Image Slider的寫法來參考，蠻好用的大絕招，就是在github搜尋Image Slider，就會有很多可以參考的專案。
從靜態畫面到增加各種互動功能，這個過程不輕鬆。但隨著實作經驗累積，對程式碼的熟悉度也逐漸提升。深深有感所花的時間都將回報在自己的能力上。
多位前輩提到，照片載入的體驗尚有優化空間，也計劃在未來進行調整，並希望能早日將完整功能上線，然後就過了一年了。。。。。。
推薦閱讀：
今天分享就到這拉，上面蠻多教學資源都有點年紀了，請小心參考，前端技術日新月異R。
有關Side Project Taiwan的簡介
Side Project Taiwan 的宗旨是藉由Side Project開發來成就自我，透過持續學習和合作，共同推動技術和專業的發展。我們相信每一個參與者，無論是什麼專業，都能在這個社群中找到屬於自己的成長空間。
歡迎所有對Side Project開發有興趣的人加入我們，可以是有點子來找夥伴，也可以是來尋找有興趣的Side >Project加入，邀請大家一同打造一個充滿活力且有意義的技術社群！
Discord頻道連結：https://sideproj.tw/dc
iThome鐵人賽
看影片追技術